<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title">订单详情</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
		</view>
		<view class="con">
			<view class="box state">
				<view class="state_left state1" v-if="detail.status == 5">待支付</view>
				<view class="state_left state2" v-if="detail.status == 0">房东确认中</view>
				<view class="state_left state3" v-if="detail.status == 1">待入住</view>
				<view class="state_left state4" v-if="detail.status == 2">已入住</view>
				<view class="state_left state5" v-if="detail.status == 3 || detail.status == 6">已完成</view>
				<view class="state_left state6" v-if="detail.status == 4">已取消</view>
				<view class="state_right" v-if="detail.status == 5">{{ formatCountdown(detail.beizhu) }}</view>
				<view class="state_right" v-if="detail.status == 0">{{ formatCountdown_2(detail.beizhu) }}</view>
				<view class="state_right" v-if="detail.status == 1">请于{{ detail.ktime }}14:00-24:00入住</view>
				<view class="state_right" v-if="detail.status == 2">请于{{ detail.jtime }}12:00之前需退房</view>
			</view>

			<view class="box date">
				<view class="date_top">
					<view class="date_top_left">
						<span class="span">入离日期</span>
						{{ cityStore.dayDate(detail.ktime).month_day }}至{{ cityStore.dayDate(detail.jtime).month_day }}
					</view>
					<view class="date_top_right">共 {{ detail.jiwan }} 晚</view>
				</view>
				<view class="date_box">
					<view class="date_box_list" v-for="(item, index) in riqi" :key="index">
						<view class="date_box_list_nr">{{ item.time }}</view>
						<view class="date_box_list_nr">¥{{ item.price }}</view>
					</view>
				</view>
			</view>

			<view class="box info info_1" v-for="(item, index) in list" :key="index">
				<view class="info_left">
					<view class="info_left_title">{{ item.name }}</view>
					<view class="info_left_nr">
						<image class="info_left_nr_img" src="/static/61.png" mode=""></image>
						{{ item.idcard }}
					</view>
					<view class="info_left_nr">
						<image class="info_left_nr_img" src="/static/62.png" mode=""></image>
						{{ item.phone }}
					</view>
				</view>

				<view class="info_right" @click="$callPhone(item.phone)">立即拨号</view>
			</view>

			<view class="box home">
				<view class="home_box">
					<image class="home_box_left" :src="fangyuan.photo" mode=""></image>
					<view class="home_box_right">
						<view class="home_box_right_nr">
							<view class="home_box_right_nr_title">{{ fangyuan.title }}</view>
							<view class="home_box_right_nr_text">{{ fangyuan.address }}</view>
							<view class="home_box_right_nr_text">{{ fangyuan.czleixing }}·入住{{ list.length }}人</view>
						</view>
					</view>
				</view>
				<view class="home_btn">
					<view class="home_btn_list">
						<span class="span1">支付金额</span>
						<span class="span2">¥330</span>
					</view>
					<view class="home_btn_list">
						<span class="span3">房费</span>
						<span class="span4">2</span>
						<span class="span3">晚</span>

						<span class="span1">¥330</span>
					</view>
					<view class="home_btn_list">
						<span class="span3">优惠券</span>
						<span class="span5">(8折)</span>
						<span class="span1">-¥30</span>
					</view>
					<view class="home_btn_list">
						<span class="span3">连住特惠</span>
						<span class="span1">-¥30</span>
					</view>
				</view>
			</view>

			<view class="box info">
				<view class="info_title">订单信息</view>

				<view class="info_list">
					<view class="info_list_left">订单编号</view>
					<view class="info_list_right">
						{{ detail.order_number }} 丨
						<span class="span" @click="$fz(detail.order_number)">复制</span>
					</view>
				</view>
				<view class="info_list" v-if="detail.create_times">
					<view class="info_list_left">下单时间</view>
					<view class="info_list_right">{{ detail.create_times }}</view>
				</view>
				<view class="info_list" v-if="detail.pay_time">
					<view class="info_list_left">支付时间</view>
					<view class="info_list_right">{{ detail.pay_time }}</view>
				</view>
				<view class="info_list" v-if="detail.qxtime">
					<view class="info_list_left">取消时间</view>
					<view class="info_list_right">{{ detail.qxtime }}</view>
				</view>
			</view>

			<view class="tip">
				<image class="tip_img" src="/static/56.png" mode=""></image>
				<view class="tip_title">友情提示：如需发票请线下联系房东！</view>
			</view>

			<view class=""></view>
			<view class="box notice">
				<view class="notice_nr">
					<view class="notice_nr_left">退订规则</view>
					<view class="notice_nr_right">
						预订成功30分钟内可免费取消：{{
							cityStore.dayDate(detail.ktime).month_day
						}}14:00前可免费取消，若未入住或过时取消将扣除100%房费。
					</view>
				</view>
				<view class="notice_nr">
					<view class="notice_nr_left">入住时间</view>
					<view class="notice_nr_right">14:00-24:00入住，12:00之前需退房（以当地城市时区为主）</view>
				</view>
				<view class="notice_nr">
					<view class="notice_nr_left">预订协议</view>
					<view class="notice_nr_right">
						我同意
						<span class="span" @click="to_text(3)">《服务协议》</span>
						<span class="span" @click="to_text(4)">《房客规则》</span>
						<span class="span" @click="to_text(5)">《住宿旅行意外险告知书》</span>
						及房东规定得退订入住要求。
					</view>
				</view>
			</view>
		</view>

		<view class="btn">
			<view class="btn_box">
				<view class="btn_box_right" @click="open(1)" v-if="detail.status == 5">确认接单</view>
				<view class="btn_box_right" @click="open(2)" v-if="detail.status == 1">确认入住</view>
				<view class="btn_box_right" @click="open(3)" v-if="detail.status == 2">确认退房</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" background-color="#fff" border-radius="10px" @change="popup_change">
			<view class="popup_box">
				<view class="popup_box_top">温馨提示</view>
				<view class="popup_box_nr" v-if="popup_type == 1" style="text-align: center">是否确认接单？</view>
				<view class="popup_box_nr" v-if="popup_type == 2" style="text-align: center">是否确认入住？</view>
				<view class="popup_box_nr" v-if="popup_type == 3" style="text-align: center">是否确认退房？</view>
				<view class="popup_box_btn">
					<view class="popup_box_btn_nr btn1" @click="close">取消</view>
					<view class="popup_box_btn_nr btn2" @click="close">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let id = ref(0)
	let detail = ref({})
	let list = ref([])
	let fangyuan = ref({})
	let show = ref(false)
	let popup = ref(null)
	let popup_type = ref(1)

	let riqi = ref([])
	const Location = () => {
		console.log(666)
		uni.openLocation({
			name: fangyuan.value.title,
			address: fangyuan.value.address,
			latitude: Number(fangyuan.value.weidu),
			longitude: Number(fangyuan.value.jingdu),
			success: function () {
				console.log('success')
			},
			fail(err) {
				console.log('err', err)
			}
		})
	}
	const popup_change = (e) => {
		show.value = e.show
	}
	const open = (type) => {
		popup.value.open()
		popup_type.value = type
	}
	const close = () => {
		popup.value.close()
	}
	const submit = () => {
		if (popup_type.value == 1) {
			uni.showToast({
				mask: true,
				title: '暂无支付',
				icon: 'none',
				duration: 500
			})
			uni.navigateBack()
			close()
			return
			http.post('/srapi/wode/qxdingdan', { id: id.value }).then((res) => {
				console.log('取消订单', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				uni.navigateBack()
				close()
			})
		} else {
			uni.showToast({
				mask: true,
				title: '暂无支付',
				icon: 'none',
				duration: 500
			})
			close()
			uni.navigateBack()
			return
			http.post('/srapi/wode/tfdingdan', { id: id.value }).then((res) => {
				console.log('我要退房', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				uni.navigateBack()
				close()
			})
		}
	}
	const pay = (val) => {
		uni.navigateBack()
	}
	const indexlist = async () => {
		await http.post('/srapi/keyuan/dddetail', { id: id.value }).then((res) => {
			console.log('返回值', res)
			detail.value = res.data
			list.value = res.datas
			fangyuan.value = res.fangyuan
			riqi.value = res.riqi
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
	})
	let timer = null

	// 计算倒计时
	const calculateCountdown = (item) => {
		if (!item) return
		let expireTime = item.replaceAll('-', '/')
		// console.log('expireTime', expireTime)
		const now = new Date().getTime()
		const end = new Date(expireTime).getTime()
		const timeLeft = end - now

		if (timeLeft <= 0) {
			return {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				expired: true
			}
		}

		const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24))
		const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
		const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60))
		const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000)

		return {
			days,
			hours: hours < 10 ? `0${hours}` : hours,
			minutes: minutes < 10 ? `0${minutes}` : minutes,
			seconds: seconds < 10 ? `0${seconds}` : seconds,
			expired: false
		}
	}

	// 格式化倒计时显示
	const formatCountdown = (countdown) => {
		if (!countdown || countdown.expired) {
			return '已过期'
		} else {
			// return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
			return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
		}
	}
	// 格式化倒计时显示
	const formatCountdown_2 = (countdown) => {
		if (!countdown || countdown.expired) {
			return '已失效'
		} else {
			// return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
			return ` ${countdown.hours}时${countdown.minutes}分${countdown.seconds}秒内未接单将失效`
		}
	}

	// 更新所有订单的倒计时
	const updateAllCountdowns = () => {
		calculateCountdown(detail.value.dqtime)
	}
	onMounted(() => {
		// 初始化倒计时
		updateAllCountdowns()

		// 设置定时器每秒更新
		timer = setInterval(() => {
			updateAllCountdowns()
		}, 1000)
	})

	onUnmounted(() => {
		// 清除定时器
		if (timer) {
			clearInterval(timer)
		}
	})

	const to_appraise = () => {
		uni.navigateTo({
			url: '/pages_A/appraise/appraise?id=' + id.value
		})
	}
	const to_text = (type) => {
		uni.navigateTo({
			url: '/pages_A/text/text?type=' + type
		})
	}
</script>

<style lang="less" scoped>
	.top {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		padding-bottom: 20rpx;
		background: linear-gradient(0deg, #d4ecfb 0%, #c1e7fc 30%);
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}
	.con {
		padding: 10rpx 30rpx 30rpx;
		background: linear-gradient(0deg, #f4f5f9 70%, #d4ecfb 100%);
	}
	.box {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 18rpx;
	}

	.state {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.state_left {
			font-size: 28rpx;
			font-weight: 700;
		}
		.state1 {
			color: #ff8500;
		}
		.state2 {
			color: #ff8500;
		}
		.state3 {
			color: #ff8500;
		}
		.state4 {
			color: #ff8500;
		}
		.state5 {
			color: #12c89b;
		}
		.state6 {
			color: #787878;
		}
		.state_right {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
		}
	}
	.info_1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.info {
		.info_left {
			.info_left_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
			}
			.info_left_nr {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
				.info_left_nr_img {
					width: 26rpx;
					height: 24rpx;
					margin-right: 16rpx;
				}
			}
		}
		.info_right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 153rpx;
			height: 62rpx;
			background: #3475f3;
			border-radius: 31rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.date {
		.date_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;
			.date_top_left {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				.span {
					font-size: 28rpx;
					font-weight: 700;
					text-align: left;
				}
			}
			.date_top_right {
				font-size: 28rpx;
				font-weight: 500;
				color: #787878;
			}
		}
		.date_box {
			background: #f4f5f9;
			border-radius: 10rpx;
			padding: 0 30rpx;
			.date_box_list {
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e6e7ec;
				.date_box_list_nr {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
			.date_box_list:last-child {
				border-bottom: none;
			}
		}
	}

	.landlord {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.landlord_img {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.landlord_box {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.landlord_box_left {
				.landlord_box_left_title {
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 5rpx;
				}
				.landlord_box_left_img {
					width: 140rpx;
					height: 42rpx;
				}
			}
			.landlord_box_right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
				.landlord_box_right_img {
					width: 11rpx;
					height: 20rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.home {
		.home_box {
			display: flex;
			justify-content: center;
			align-items: center;
			.home_box_left {
				width: 140rpx;
				height: 140rpx;
				border-radius: 16rpx;
				margin-right: 22rpx;
			}
			.home_box_right {
				flex: 1;
				display: flex;
				align-items: center;
				.home_box_right_nr {
					flex: 1;
					.home_box_right_nr_title {
						font-size: 28rpx;
						font-weight: 700;
						color: #000000;
					}
					.home_box_right_nr_text {
						font-size: 28rpx;
						font-weight: 500;
						color: #787878;
					}
				}
				.home_box_right_dh {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #2468fb;
					.home_box_right_dh_img {
						width: 30rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.home_btn {
			margin-top: 15rpx;
			.home_btn_list {
				text-align: right;
				.span1 {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.span2 {
					font-size: 32rpx;
					font-weight: 700;
					color: #e93424;
				}
				.span3 {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
				}
				.span4 {
					font-size: 24rpx;
					font-weight: 500;
					color: #2468fb;
				}
				.span5 {
					font-size: 24rpx;
					font-weight: 500;
					color: #e93424;
				}
			}
		}
	}

	.info {
		.info_title {
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 20rpx;
		}
		.info_list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.info_list_left {
				font-size: 28rpx;
				font-weight: 500;
				color: #787878;
			}
			.info_list_right {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				.span {
					color: #2468fb;
				}
			}
		}
	}

	.tip {
		display: flex;
		align-items: center;
		padding: 20rpx 10rpx 30rpx;
		.tip_img {
			width: 28rpx;
			height: 28rpx;
			margin-right: 13rpx;
		}
		.tip_title {
			font-size: 24rpx;
			font-weight: 500;
			color: #ff9600;
		}
	}

	.notice {
		padding-bottom: 1rpx;
		margin-bottom: 60rpx;
		.notice_nr {
			display: flex;
			align-items: flex-start;
			margin-bottom: 50rpx;
			.notice_nr_left {
				width: 126rpx;
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
			}
			.notice_nr_right {
				flex: 1;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				.span {
					color: #1e80ff;
				}
			}
		}
	}

	.btn {
		margin-top: 60rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx;
			padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			.btn_box_left {
				width: 223rpx;
				height: 78rpx;
				background: #ffffff;
				border: 2rpx solid #2468fb;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #2468fb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 21rpx;
				.btn_box_left_img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn_box_right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2468fb;
				border: 2rpx solid #2468fb;
				height: 78rpx;
				border-radius: 39rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}
		}
	}

	.popup_box {
		width: 520rpx;
		box-sizing: border-box;
		padding: 20rpx;
		.popup_box_top {
			padding: 10rpx;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
		}
		.popup_box_nr {
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
			.span {
				color: #2468fb;
			}
		}

		.popup_box_btn {
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.popup_box_btn_nr {
				width: 182rpx;
				height: 62rpx;
				border-radius: 32rpx;
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
				line-height: 64rpx;
			}
			.btn1 {
				background: #ffffff;
				border: 1rpx solid #b4b4b4;
				color: #787878;
			}
			.btn2 {
				background: #2468fb;
				border: 1rpx solid #2468fb;
				color: #ffffff;
			}
		}
	}
	//
</style>
